<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<title>Travel Dream</title>
</h:head>
<link
rel="stylesheet"
href="customerHome.css"
type="text/css"
media="all"/>

<h:body onload="#tableBean.selectedTravel">
	<div id="templatemo_maincontainer">
<div id="templatemo_topsection">
  <div id="templatemo_title">TRAVEL Dream COMPANY</div>
  <div id="templatemo_slogan">The best way to travel !</div>
  <div id="hello"><h:outputText value="Hello #{userBean.getName()} !" /></div>
 
</div>
<div id="templatemo_left_column">
  <div id="templatemo_menu_top"></div>
  <div class="templatemo_menu"> 
  <ul>
   	 <li><a href="customerHome.xhtml">Home</a></li>
    <li><a href="myTravels.xhtml">My Travels</a></li>
    <li><a href="myInvitations.xhtml">My Invitations</a></li>
    <li><a href= "../logoutRedirect.xhtml">Logout</a></li>
  </ul></div>
  <div id="templatemo_contact">
    <strong>QUICK CONTACT<br /></strong>
Tel: 001-100-1000<br />
Fax: 002-200-2000<br />
Email: info[at]templatemo.com</div>
</div>
<div id="templatemo_right_column">
  <div class="innertube">
    <h1>Welcome to Travel Dream</h1>

	        <div class="form">
           <h:form id="form"> 
           <p:growl id="msgs" showDetail="true" />  
           <div class="header-trip">
           <strong><h:outputText value="You are personalizing a travel from #{personalizeBean.personalizedTPDTO.meanOfTransportation1.trip.departurePlace} to #{personalizeBean.personalizedTPDTO.meanOfTransportation1.trip.arrivalPlace} " /></strong> 
	    	</div>
	    	<h:panelGrid  columns="2" cellpadding="4">
	    	
	    	
	    	
			    <h:outputText value="Date of Departure:" />
			    
			    <p:calendar value="#{personalizeBean.personalizedTPDTO.dateOfDeparture}" mindate="#{personalizeBean.currentDate}" pattern="dd/MM/yyyy">  
        			<p:ajax event="dateSelect"  listener="#{personalizeBean.handleStart}" update="endCalendar"/>  
    			</p:calendar>

    			<h:outputText value="Date of Return:" />
			      
			    <p:calendar id="endCalendar" mindate="#{personalizeBean.personalizedTPDTO.dateOfDeparture}" value="#{personalizeBean.personalizedTPDTO.dateOfReturn}" pattern="dd/MM/yyyy">  
        			<p:ajax event="dateSelect" listener="#{personalizeBean.handleEnd}"/>  
    			</p:calendar>  

    			 
    			  <h:outputText value="Number of participants:"/>
				
				 <p:spinner id="ajaxspinner" value="#{personalizeBean.nomberOfPeople}" min="1">
                    <p:ajax update=":form" process="@this" />  
                </p:spinner> 



			</h:panelGrid>
			<h:panelGrid  columns="4" cellpadding="4">
		  
			    <h:outputText value="Hotel:" />
			    <p:inputText id="displayHotel" value="#{personalizeBean.personalizedTPDTO.getHotelBean().getName()}"  style="width: 500px;" editable="false"/>  
			     

 				<p:commandButton id="HotelsTables" value="Change" type="button" /> 
         
         
       
                   <p:overlayPanel id="Hotels" for="HotelsTables" hideEffect="fade" dynamic="true"> 
 						 <h:form>
  				
   				 <p:dataTable id="hotelList" var="hotel" value="#{personalizeBean.hotels}" >
   
        <p:column headerText="Name" style="width:24%">  
            <h:outputText value="#{hotel.name}" />  
        </p:column>  
  
        <p:column headerText="Ranking" style="width:24%">  
            <h:outputText value="#{hotel.getClassification()} stars" />  
        </p:column>  
  
        <p:column headerText="Address" style="width:24%">  
            <h:outputText value="#{hotel.streetNumber} #{hotel.streetName} " />  
        </p:column>  
  
        <p:column style="width:4%">  
                 <p:commandButton action="#{personalizeBean.changeHotel(hotel)}" value="Select" update=":form:displayHotel"  process="@this"  >  
			
            </p:commandButton>  
        </p:column>  

    </p:dataTable>
   </h:form>
    </p:overlayPanel>
    
 
  
 
   

			     
			    <h:outputText value="Transportation to go:" />
			    <p:inputText id="toGoDisplay" value="#{personalizeBean.personalizedTPDTO.getMeanOfTransportation1().toString()}" style="width: 500px;"/>  
			      <p:commandButton id="ToGoTables" value="Change" type="button" /> 
                   <p:overlayPanel id="ToGo" for="ToGoTables" hideEffect="fade" dynamic="true"> 
 					<h:form>
  				
   				 	<p:dataTable id="ToGoList" var="toGo" value="#{personalizeBean.toGos}" >
   
        			<p:column headerText="Type" style="width:24%">  
           			 <h:outputText value="#{toGo.getTransportationType().getType()}" />  
      			  </p:column>  
  
   					<p:column headerText="Company" style="width:24%">  
           			 <h:outputText value="#{toGo.getTransportationType().getCompany()}" />  
      			  </p:column>  
      			  
      				 <p:column headerText="Class" style="width:24%">  
           			 <h:outputText value="#{toGo.getTransportationType().getTransportationClass()}" />  
      			  </p:column>  
  
      				  <p:column headerText="Departure time" style="width:24%">  
          			  <h:outputText value="#{toGo.getDepartureTime()}" />  
      			  </p:column>  
      			  
      			  <p:column headerText="Duration" style="width:24%">  
          			  <h:outputText value="#{toGo.getDuration()} min " />  
      			  </p:column> 
      			  
      			  <p:column headerText="Cost" style="width:24%">  
          			  <h:outputText value="#{toGo.getCost()} euros " />  
      			  </p:column> 
      			  
      			  <p:column headerText="Cost" style="width:24%">  
          			  <h:outputText value="#{toGo.getCost()} euros " />  
      			  </p:column> 
  
       			 <p:column style="width:4%">  
                 <p:commandButton action="#{personalizeBean.changeToGo(toGo)}" value="Select" update=":form:toGoDisplay"  process="@this"  >  
           		 </p:commandButton>  
        		</p:column>  

   		 </p:dataTable>
   		</h:form>
    	</p:overlayPanel>










			    <h:outputText value="Transportation to return:" />
			    <p:inputText id="toReturnDisplay" value="#{personalizeBean.personalizedTPDTO.getMeanOfTransportation2().toString()}" style="width: 500px;"/>  			    
			       <p:commandButton id="ToReturnTables" value="Change" type="button" /> 
                   <p:overlayPanel id="ToReturn" for="ToReturnTables" hideEffect="fade" dynamic="true"> 
 					<h:form>
  				
   				 	<p:dataTable id="ToReturnList" var="toReturn" value="#{personalizeBean.toReturns}" >
   
        			<p:column headerText="Type" style="width:24%">  
           			 <h:outputText value="#{toReturn.getTransportationType().getType()}" />  
      			  </p:column>  
  
   					<p:column headerText="Company" style="width:24%">  
           			 <h:outputText value="#{toReturn.getTransportationType().getCompany()}" />  
      			  </p:column>  
      			  
      				 <p:column headerText="Class" style="width:24%">  
           			 <h:outputText value="#{toReturn.getTransportationType().getTransportationClass()}" />  
      			  </p:column>  
  
      				  <p:column headerText="Departure time" style="width:24%">  
          			  <h:outputText value="#{toReturn.getDepartureTime()}" />  
      			  </p:column>  
      			  
      			  <p:column headerText="Duration" style="width:24%">  
          			  <h:outputText value="#{toReturn.getDuration()} min " />  
      			  </p:column> 
      			  
      			  <p:column headerText="Cost" style="width:24%">  
          			  <h:outputText value="#{toReturn.getCost()} euros" />  
      			  </p:column> 
  
       			 <p:column style="width:4%">  
                 <p:commandButton action="#{personalizeBean.changeToReturn(toReturn)}" value="Select" update=":form:toReturnDisplay"  process="@this"  >  
           		 </p:commandButton>  
        		</p:column>  

   		 </p:dataTable>
   		</h:form>
    	</p:overlayPanel>
    	
    	
    	
    	</h:panelGrid>
    	<h:panelGrid  columns="2" cellpadding="3">
			       
	
			<p:dataTable id="excursions" var="excursion" value="#{personalizeBean.getExcursionsInPersTP()}" >  
  
     			<f:facet name="header">  
              		  Excursions In Your Travel Package 
       			 </f:facet>  
 
    		    <p:column headerText="Name">  
        		    #{excursion.name}  
      		  </p:column>  
  
      		  <p:column headerText="Meeting Place">  
       		     #{excursion.meetingPlace}  
      		  </p:column>  
  
      		  <p:column headerText="Meeting Time" >  
          		  #{excursion.meetingTime}  
       		 </p:column>  
  
       		 <p:column headerText="Cost">  
           		 #{excursion.cost}  
        	</p:column>  
        	
        	<p:column headerText="Date">
        	 <p:calendar  value="#{personalizeBean.date}" mindate="#{personalizeBean.personalizedTPDTO.dateOfDeparture}" maxdate="#{personalizeBean.personalizedTPDTO.dateOfReturn}" pattern="dd/MM/yyyy">  
        			<p:ajax event="dateSelect"  listener="#{personalizeBean.handleSetDate(excursion)}"/>  
    			</p:calendar>
        	</p:column>
        	
        	<p:column headerText="Remove">
        		<p:commandButton id="removeButton" value="Remove Excursion" action="#{personalizeBean.removeExcursion(excursion)}" update=":form:excursions :form:addExcursionList" process="@this" />  
        	</p:column>
  
    </p:dataTable>  
    
    
    <p:dataTable id="addExcursionList" var="e" value="#{personalizeBean.excursions}" >
   
    	<f:facet name="header">  
                Excursions Available 
        </f:facet>  
        			<p:column headerText="Name" style="width:24%">  
           			 <h:outputText value="#{e.getName()}" />  
      			  </p:column>  
  
   					<p:column headerText="Meeting place" style="width:24%">  
           			 <h:outputText value="#{e.meetingPlace}" />  
      			  </p:column>  
      			  
      				 <p:column headerText="Meeting Time" style="width:24%">  
           			 <h:outputText value="#{e.meetingTime}" />  
      			  </p:column>  
  
      			  
      			  <p:column headerText="Cost" style="width:24%">  
          			  <h:outputText value="#{e.getCost()} euros" />  
      			  </p:column> 
  
       			 <p:column style="width:4%">  
                 <p:commandButton action="#{personalizeBean.addExcursion(e)}" value="Add Excursion" update=":form:excursions :form:addExcursionList"  process="@this"  >  
           		 </p:commandButton>  
        		</p:column>  

   		 </p:dataTable>
    
   		 
    	
	
			       
			      
			       
			     </h:panelGrid>
			      <p:commandButton type="submit" value="Save" process="@this">
		 			 <p:ajax  listener="#{personalizeBean.savePersonalizedTP()}" update=":form:msgs" />           
      			 </p:commandButton>
   		</h:form>

</div> 
    
  </div>
</div>

</div>
<div id="templatemo_footer"> TravelDream Company</div>




    </h:body>
</html>


